/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  BlobInputList, CCell, Cell, Input, Table, TableBody, TableRow, Text,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {usePrefixDataTable} from "../../hook/usePrefixData";
import {useMeasureInpFilter} from "../../common/hooks";
import {FootMenRow} from "../../contain/rarelyVary";
import {SimpleImg} from "../../../comp/Image";
import Img_WaterPrs from "./WaterPress.png";

const input压力表={
  edit:(inp:any,setInp:(a:any)=>void, orc:any)=>{
    return <div css={{width: '100%',display: 'inline-flex',alignItems: 'center',justifyContent: 'center',flexWrap:'wrap'}}>
      压力表量程
      <Input value={inp?.水压表程 ||''} size={12} style={{display: 'inline-flex', width: 'unset'}}
             onChange={e => setInp({ ...inp, 水压表程: e.currentTarget.value||undefined }) }/>
      MPa，精度
      <Input value={inp?.水压表精 ||''} size={12} style={{display: 'inline-flex', width: 'unset'}}
             onChange={e => setInp({ ...inp, 水压表精: e.currentTarget.value||undefined }) }/>
      级。
    </div>;
  },
  names: ['水压表程','水压表精'],
  toTail: '压力表',
  view:(orc:any)=>{
    return <div css={{display: 'flex',flexDirection: 'row',alignItems: 'flex-start',justifyContent: 'center'}}>
          <Text >量程{orc?.水压表程??'／'}MPa,</Text><Text >精度{orc?.水压表精??'／'}级</Text>
    </div>
  }
};
/**准备 公用的模板： @存储唯一性预留，多个可能模板集成 ？ @尽量避免碰见”水*“。
 * */
export const config水压试 = [
  [['设计压力', {n:'水设计压',u:'MPa'}], ['试验压力',{n:'水试验压',u:'MPa'}] ],
  [['试验方法', '水试验法',], ['压力表', '水压表程', input压力表]],
  [['试验介质', '水试介质',], ['介质温度', {n:'水介质温',u:' ℃'}]],
  [['试压部位', '水试部位',], ['环境温度', {n:'水环境温',u:' ℃'}]],
];
export const itemA水压试=['水保时公','水保时试', '水压结果' ];
const itemA水压试m=['水设计压','水试验压', ...itemA水压试];
export const HydraulicTestRes=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,refWidth}:InternalItemProps,  ref
    ) => {
      const {inp, setInp} = useItemInputControl({ ref });
      const [getInpFilter]=useMeasureInpFilter(null,itemA水压试m,);
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}:</Text>
        <Text variant="h6">试 验 程 序：</Text>
        <hr/>
        <div>缓慢升至公称压力：
          <Input value={inp?.水设计压 || ''} size={7} style={{display: 'inline-flex', width: 'unset'}}
                 onChange={e => setInp({...inp, 水设计压: e.currentTarget.value || undefined})}/>
          MPa，保压
          <Input value={inp?.水保时公 || ''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                 onChange={e => setInp({...inp, 水保时公: e.currentTarget.value || undefined})}/>
          min；
          确认无泄漏后，再缓慢升压至试验压力：
          <Input value={inp?.水试验压 || ''} size={7} style={{display: 'inline-flex', width: 'unset'}}
                 onChange={e => setInp({...inp, 水试验压: e.currentTarget.value || undefined})}/>
          MPa，保压
          <Input value={inp?.水保时试 || ''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                 onChange={e => setInp({...inp, 水保时试: e.currentTarget.value || undefined})}/>
          min；
          确认无泄漏后，泄压至 0 MPa
        </div>
        <br/>
        <hr/>
        <Text variant="h5">水压试验报告-试验结果：</Text>
        <BlobInputList value={inp?.水压结果 || ''} rows={4} datalist={['合格。']}
                       onListChange={v => setInp({...inp, 水压结果: v || undefined})}/>
      </InspectRecordLayout>;
});

/**不会出现重复的分项，用这办法即可。 cm/gasproof
 * */
export const HydraulicTestVw = ({orc, rep, op}: { orc: any, rep: any, op?: boolean }
) => {
  const renderUpper = usePrefixDataTable({config: config水压试, orc, rep, slash: true});
  return <>
    <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
      <Text id='HydraulicTest' variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>水压试验报告</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text>使用证号：{orc?.使用证号}</Text>
        <Text>{op ? '记录' : '报告'}编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["4.7%", "4%", "%", "4%", "4.9%", "42%"] }
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}} tight miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={"HydraulicTest"}>
          {renderUpper}
        </RepLink>
        <RepLink rep={rep} tag={"HydraulicTestRes"}>
          <TableRow><CCell colSpan={6}>试 验 程 序</CCell></TableRow>
          <TableRow><Cell colSpan={6}>
            <div css={{width: 'fit-content', margin: 'auto'}}>
              缓慢升至公称压力：{orc?.水设计压??'／'} MPa，保压 {orc?.水保时公??'／'} min；<br/>
              确认无泄漏后，再缓慢升压至试验压力：{orc?.水试验压??'／'} MPa，保压 {orc?.水保时试??'／'} min；<br/>
              确认无泄漏后，泄压至 0 MPa
            </div>
          </Cell></TableRow>
          <TableRow><CCell colSpan={6}>
            <Text css={{fontSize:'0.75rem',display: 'flex'}}>试验压力曲线：</Text>
            <SimpleImg url={Img_WaterPrs} />
          </CCell></TableRow>

          <TableRow>
            <Cell colSpan={6}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
              试验结果：<br/>
              {orc?.水压结果 || '／'}
            </div></Cell>
          </TableRow>
        </RepLink>
      </TableBody>
      <FootMenRow span={6} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </Table>
  </>;
};
